<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="line_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { year: "1901 年", nums: 7 },
        { year: "1902 年", nums: 6.9 },
        { year: "1903 年", nums: 9.5 },
        { year: "1904 年", nums: 10.2 },
        { year: "1905 年", nums: 11.4 },
        { year: "1906 年", nums: 13.2 },
        { year: "1907 年", nums: 10.2 },
        { year: "1908 年", nums: 11.3 },
        { year: "1909 年", nums: 13.6 },
        { year: "1910 年", nums: 14.8 },
        { year: "1911 年", nums: 13.2 },
        { year: "1912 年", nums: 12.4 },
        { year: "1913 年", nums: 13.6 },
        { year: "1914 年", nums: 14.2 },
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { year: "1915 年", nums: 13.5 },
        { year: "1916 年", nums: 12.8 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "line_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表绑定数据
    this.chart.data(this.transformData(this.dataList));
    // 设置度量
    this.chart.scale({
      x: {
        nice: true,
      },
      y: {
        nice: true,
      },
    });
    // 不显示坐标轴
    this.chart.axis(false);
    // 不显示图例
    this.chart.legend(false);
    // 设置自定义提示信息
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      itemTpl:
        '<li class="g2-tooltip-list-item" style="margin-bottom:4px;">' +
        '<div style="padding-bottom:8px;"><span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
        "{year}</div>" +
        '<div style="padding-bottom:4px;text-align: left;">销售量：{nums}</div>' +
        "</li>",
    });
    // 映射图表
    this.chart
      .polygon()
      .position("x*y")
      .color("year")
      .tooltip("year*nums", (year, nums) => {
        return {
          year,
          nums,
        };
      })
      .style({
        lineWidth: 1,
        stroke: "#fff",
      })
      .label("year", {
        content: (obj) => {
          if (obj.name !== "root") {
            return obj.year;
          }
        },
      });
    this.chart.interaction("element-active");

    this.chart.render();
  },
  methods: {
    // 将现有数据转换成
    transformData(data) {
      const nodes = [];
      const temp = {
        name: "root",
        children: data,
      };
      const dv = new DataView();
      // dv.dataType 会被变更为 'hierarchy' ，从而 dv 可以执行一些树形结构相关的实例方法和 Transform。
      // dv.root 为根节点
      // hierarchy.treemap:根据树形数据生成树形图 Treemap 布局
      dv.source(temp, {
        type: "hierarchy",
      }).transform({
        field: "nums",
        type: "hierarchy.treemap",
        tile: "treemapResquarify",
        as: ["x", "y"],
      });
      console.log(dv.getAllNodes());
      for (let node of dv.getAllNodes()) {
        if (node.data.name == "root") continue;
        else
          nodes.push({
            year: node.data.year,
            nums: node.data.nums,
            x: node.x,
            y: node.y,
          });
      }
      console.log(nodes);
      return nodes;
    },
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      this.chart.changeData(this.transformData(newValue) );
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
